PostCSS :dir() Pseudo
PostCSS :dir() Pseudo lets you use the :dir()
pseudo-class to style by
directionality in CSS, following the Selectors specification.
article h3:dir(rtl) {
margin-right: 10px;
}
article h3:dir(ltr) {
margin-left: 10px;
}
[dir="rtl"] article h3 {
margin-right: 10px;
}
[dir="ltr"] article h3 {
margin-left: 10px;
}
Future-proof your CSS
If your browserslist already supports the :dir()
pseudo-class, this plugin
will not change your CSS. Learn more about this feature in the
browsers
section.
Maintain Specificity
Using PostCSS :dir() Pseudo will not impact selector weight, but it will
require having at least one [dir]
attribute in your HTML. If you don’t have
any [dir]
attributes, consider using the following JavaScript:
document.documentElement.dir=document.documentElement.dir||'ltr';
If you absolutely cannot add a [dir]
attribute in your HTML or even force one
via JavaScript, you can still work around this by presuming a direction in your
CSS using the dir
option, but understand that this will
sometimes increase selector weight by one element (html
).
Usage
Add PostCSS :dir() Pseudo to your build tool:
npm install postcss-dir-pseudo-class --save-dev
Node
Use PostCSS :dir() Pseudo to process your CSS:
require('postcss-dir-pseudo-class').process(YOUR_CSS );
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS :dir() Pseudo as a plugin:
postcss([
require('postcss-dir-pseudo-class')()
]).process(YOUR_CSS);
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS :dir() Pseudo in your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-dir-pseudo-class')()
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS :dir() Pseudo in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-dir-pseudo-class')()
]
},
dist: {
src: '*.css'
}
}
});
Browsers Option
If your browserslist already supports the :dir
pseudo-class, this plugin
will not change your CSS. While only Firefox currently supports :dir
, this
will surely improve over time.
Here’s an example of a package.json
using a browserslist that would fully
support the :dir
pseudo-class:
{
"browserslist": "firefox >= 49"
}
And here’s an example of using the browsers
option to accomplish the same
thing:
require('postcss-dir-pseudo-class')({
browsers: 'firefox >= 49'
});
In both of these examples, the CSS would remain unchanged.
.example:dir(rtl) {
margin-right: 10px;
}
.example:dir(rtl) {
margin-right: 10px;
}
Dir Option
By default, this plugin requires you to include a direction [dir]
attribute
in your HTML, preferably on the html
element. If you prefer not to, you
can presume a direction in your CSS using the dir
option.
Here’s an example of using the dir
option to presume a left-to-right
direction:
require('postcss-dir-pseudo-class')({
dir: 'ltr'
});
.example:dir(ltr) {
margin-left: 10px;
}
.example:dir(rtl) {
margin-right: 10px;
}
html:not([dir="rtl"]) .example {
margin-left: 10px;
}
[dir="rtl"] .example {
margin-right: 10px;
}